<template>
  <div class="home text-white">
    <div v-if="token" class="edit-view">
      <div v-if="openEdit === 0" class="btn" @click="openEdit = 1">
        打开编辑
      </div>
      <div v-else class="btn" @click="closeEdit">取消编辑</div>
      <div v-if="openEdit === 1" class="btn yu" @click="openEdit = 2">
        预览效果
      </div>
      <div v-if="openEdit === 2" class="btn yu" @click="openEdit = 1">
        继续编辑
      </div>
      <div v-if="openEdit !== 0" class="btn save" @click="EidtPageIndexInfoFun">
        保存编辑
      </div>
      <div class="btn save" @click="clearUser">退出登录</div>
    </div>
    <div class="home-video">
      <video
        v-if="bannerList.length > 0"
        ref="video"
        class="home-video"
        autoplay
        loop
        :muted="muted"
        :src="bannerList[0].BannerUrl"
      ></video>
      <icons @click="playPause" class="icon a" :name="play ? 'bof' : 'zant'" />
      <icons
        @click="muted = !muted"
        class="icon b"
        :name="!muted ? 'yinl' : 'jiny'"
      />
      <div v-if="isEdit" class="btn-view">
        <div class="btn">
          上传首页视频（上传后立即生效）
          <input type="file" @change="handleFileUpload" accept="video/mp4" />
        </div>
      </div>
    </div>

    <div class="home-text-view">
      <div class="desc-view">
        <div v-if="isEdit" class="tag">
          <input
            type="text"
            placeholder="输入tag标签"
            v-model="PageIndexInfo.TitleA"
          />
        </div>
        <div v-else class="tag">{{ PageIndexInfo.TitleA }}</div>
        <div v-if="isEdit" class="title">
          <input
            type="text"
            placeholder="输入主标题"
            v-model="PageIndexInfo.TitleB"
          />
        </div>
        <div v-else class="title">{{ PageIndexInfo.TitleB }}</div>
        <div v-if="isEdit" class="desc">
          <textarea
            class="textarea"
            placeholder="输入介绍"
            v-model="PageIndexInfo.TitleC"
          ></textarea>
        </div>
        <div v-else class="desc">
          {{ PageIndexInfo.TitleC }}
        </div>
        <div class="desc-a">
          <div v-if="isEdit" class="upload-img-btn">
            <div class="upload-view">
              上传图片
              <input type="file" @change="handleFileUploadA($event, 'PicA')" />
            </div>
          </div>
          <img class="icon" :src="PageIndexInfo.LargePicA" alt="" />
        </div>
      </div>
      <div class="home-user">
        <div v-if="isEdit" class="upload-img-btn">
          <div class="upload-view">
            上传图片
            <input type="file" @change="handleFileUploadA($event, 'PicB')" />
          </div>
        </div>
        <img :src="PageIndexInfo.LargePicB" alt="" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Cookies from "js-cookie";
import { computed, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  GetBanner,
  UploadFile,
  InsertBanner,
  EidtPageIndexInfo,
  GetPageIndexInfo,
} from "@/server";
const token = Cookies.get("token");
import { useAppStore } from "@/store/modules/user";
const store = useAppStore();
const router = useRouter();
const PageIndexInfo = ref({}) as any;
const openEdit = ref(0);
const closeEdit = () => {
  openEdit.value = 0;
  GetBannerFun();
  GetPageIndexInfoFun();
};
const isEdit = computed(() => openEdit.value === 1);
const muted = ref(true); //静音
const play = ref(true); //静音
const video = ref(null) as any;
const playPause = () => {
  const v = video.value;
  // 如果视频正在播放，暂停它；否则，播放它。
  if (v.paused) {
    v.play();
    play.value = true;
  } else {
    v.pause();
    play.value = false;
  }
};
const clearUser = () => {
  Cookies.remove("token");
  location.reload();
};
const selectedFile = ref("") as any;
const bannerList = ref([]) as any;
const handleFileUpload = async (event: any) => {
  selectedFile.value = event.target.files[0];
  const fd = new FormData();
  fd.append("file", selectedFile.value);
  const res: any = await UploadFile(fd);
  if (res.Tag === 1) {
    const FileName = res.Data[0].FileName;
    InsertBannerFun(FileName);
    console.log(res.Data);
  } else {
    store.error(res.Message); // 错误提示
  }
};
/**
 * @description: 上传图片
 * @param {*} event
 * @return {*}
 * @author: cool panda
 */
const handleFileUploadA = async (event: any, type: string) => {
  const file = event.target.files[0];
  let newimgdata = URL.createObjectURL(file);
  const fd = new FormData();
  fd.append("file", file);
  const res: any = await UploadFile(fd);
  if (res.Tag === 1) {
    const FileName = res.Data[0].FileName;
    PageIndexInfo.value[type] = FileName;
    PageIndexInfo.value["Large" + type] = newimgdata;
    console.log(JSON.stringify(PageIndexInfo.value));
  } else {
    store.error(res.Message); // 错误提示
  }
};
const EidtPageIndexInfoFun = async () => {
  console.log(JSON.stringify(PageIndexInfo.value));
  const { TitleA, TitleB, TitleC, PicA, PicB } = PageIndexInfo.value;
  const params = {
    TitleA,
    TitleB,
    TitleC,
    PicA,
    PicB,
    Operator: token,
  };
  const res: any = await EidtPageIndexInfo(params);
  if (res.Tag === 1) {
    closeEdit();
    console.log(res.Data);
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const InsertBannerFun = async (FileName: string) => {
  const res: any = await InsertBanner({
    Location: "B_001",
    BannerFile: [FileName],
    Operator: token,
  });
  if (res.Tag === 1) {
    GetBannerFun();
    console.log(res.Data);
  } else {
    store.error(res.Message); // 错误提示
  }
};
const GetPageIndexInfoFun = async () => {
  const res: any = await GetPageIndexInfo({});
  if (res.Tag === 1) {
    PageIndexInfo.value = res.Data;
    console.log(JSON.stringify(PageIndexInfo.value));
  } else {
    store.error(res.Message); // 错误提示
  }
};
const GetBannerFun = async () => {
  const res: any = await GetBanner({ Location: "B_001" });
  if (res.Tag === 1) {
    bannerList.value = res.Data;
    console.log(res.Data);
  } else {
    store.error(res.Message); // 错误提示
  }
};
GetBannerFun();
GetPageIndexInfoFun();
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  .home-video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      &.a {
        left: 62px;
      }
      &.b {
        left: 150px;
      }
      position: absolute;
      bottom: 32px;
      width: 48px;
      height: 48px;
    }
    .btn-view {
      position: absolute;
      .btn {
        position: relative;
        input {
          cursor: pointer;
          position: absolute;
          opacity: 0;
          width: 100%;
          height: 100%;
        }
        &:hover {
          opacity: 1;
        }
        transition: opacity 0.3s;
        opacity: 0.8;
        cursor: pointer;
        border-radius: 4px;
        min-width: 200px;
        padding: 0 20px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #ffffff;
        background: #cd3755;
      }
    }
  }
  .home-text-view {
    display: flex;
    max-height: 876px;
    justify-content: flex-end;
    background-color: #f6f6f6;
    padding-top: 100px;
    .desc-view {
      padding-top: 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 25%;
      min-width: 450px;
      margin-right: 13%;
      text-align: left;
      padding-bottom: 50px;
      .tag {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        white-space: pre-wrap;
      }
      .title {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        margin: 25px 0;
        white-space: pre-wrap;
      }
      .desc {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-bottom: 30px;
        white-space: pre-wrap;
      }
      .desc-a {
        position: relative;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-bottom: 30px;
        white-space: pre-wrap;
        .icon {
          width: 270px;
          height: 28px;
        }
      }
    }
    .home-user {
      position: relative;
      width: 35%;
      min-height: 300px;
      margin-right: 3%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      img {
        width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
  }
}
</style>
